<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>一农</title>
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <link rel="stylesheet" href="assets/mui/css/mui.min.css" />
    <link rel="stylesheet" href="assets/font/iconfont.css" />
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" href="css/login.css" />
    <script src="assets/mui/js/mui.min.js"></script>
    <script src="assets/zepto/zepto.min.js"></script>
    <script src="assets/artTemplate/template-native.js"></script>
    <script src="js/public.js"></script>
    <script src="js/login.js"></script>
    <style>
      .new-header {
        height: 40vw;
        background: url('./images/bg3.png') no-repeat center center;
        background-size: 100vw 40vw;
      }
      .mui-bar-nav.ctrls-header {
        box-shadow: none;
        display: flex;
        padding: 10vw 5vw;
      }
      .mui-bar-nav.ctrls-header .avatar {
        width: 80px;
        height: 80px;
        margin-right: 15px;
      }
      .mui-bar-nav.ctrls-header .avatar img {
        width: 80px;
        height: 80px;
      }
      .mui-bar-nav.ctrls-header .free {
        position: absolute;
        right: 0;
        top: 30%;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.2);
        padding: 5px;
        padding-left: 8px;
        border-radius: 15px 0 0 15px;
        font-size: 14px;
      }
      .mui-bar-nav.ctrls-header .free img {
        width: 17px;
        height: 17px;
        vertical-align: top;
      }
      .mui-bar-nav.ctrls-header .info-name {
        margin-top: 5px;
        font-size: 22px;
        color: #fff;
        font-weight: 800;
      }
      .mui-bar-nav.ctrls-header .person {
        margin-top: 12px;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.2);
        padding: 3px 5px;
        border-radius: 8px;
      }

      .user-nav {
        padding: 10px 10px;
      }
      .user-nav-inner {
        border-radius: 8px;
        box-shadow: rgba(0, 0, 0, 0.2) 0 1px 5px 0px;
        padding: 5px 10px;
        display: flex;
        background-color: #fff;
      }
      .user-nav .ima {
        width: 60px;
        height: 60px;
        background-color: #59c38b;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 6px;
      }
      .user-nav img {
        width: 45px;
        height: 45px;
      }
      .user-nav-l {
        display: flex;
        flex: 1;
      }
      .user-nav-l .img-r {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
      }
      .user-nav-l .img-r p:nth-child(1) {
        font-weight: 600;
        font-size: 18px;
        color: black;
      }
      .user-nav-r {
        display: flex;
        flex: 1;
      }
      .user-nav-r .img-r {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
      }
      .user-nav-r .img-r p:nth-child(1) {
        font-weight: 600;
        font-size: 18px;
        color: black;
      }

      .my-order {
        padding: 10px 10px;
      }
      .my-order-inner {
        border-radius: 8px;
        box-shadow: rgba(0, 0, 0, 0.2) 0 1px 5px 0px;
        padding: 5px 10px;
      }
      .my-order-title {
        width: 100%;
        padding: 5px 10px;
        display: flex;
        justify-content: space-between;
      }
      .my-order-title-l {
        font-weight: 700;
        font-size: 18px;
      }
      .my-order-title-r {
        color: darkgrey;
      }
      .my-order-cont {
        padding: 10px 0;
        display: flex;
      }
      .my-order-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
      .my-order-item img {
        width: 40px;
        height: 40px;
      }
      .my-order-item p {
        margin-top: 8px;
        color: black;
        font-size: 15px;
      }
      .logout-new {
        padding: 10px 10px;
      }
      .logout-new-inner {
        border-radius: 8px;
        box-shadow: rgba(0, 0, 0, 0.2) 0 1px 5px 0px;
        padding: 15px 0;
        text-align: center;
        line-height: 30px;
        color: #59c38b;
      }

      .expert-new {
        padding: 10px 10px;
      }
      .expert-new-inner {
        border-radius: 8px;
        box-shadow: rgba(0, 0, 0, 0.2) 0 1px 5px 0px;
        padding: 15px 0;
        text-align: center;
        line-height: 30px;
        color: #59c38b;
        font-weight: bold;
        display: block;
      }

      .my-report {
        padding: 10px 10px;
      }
      .my-report-inner {
        border-radius: 8px;
        box-shadow: rgba(0, 0, 0, 0.2) 0 1px 5px 0px;
        padding: 5px 10px;
        display: flex;
        justify-content: center;
      }
      .my-report-inner .my-report-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 50%;
      }

      .my-report-inner .my-report-item:nth-child(1) {
        border-right: 1px solid #ccc;
      }

      .my-report-inner .my-report-item img {
        width: 40px;
        height: 40px;
      }

      .my-report-inner .my-report-item p {
        padding-top: 8px;
      }

      .expertImg {
        width: 30px;
        height: 30px;
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <header class="mui-bar mui-bar-nav my-header">
      <h1 class="mui-title">一农</h1>
      <div class="avatar" style="display: none;">
        <img src="./images/avatar.png" alt="" />
      </div>
      <div class="info" style="display: none;">
        <div class="info-name">admin</div>
        <div class="person">种植户/种植企业 ></div>
      </div>
      <div class="free" style="display: none;">
        <img src="./images/kaidian.png" alt="" />
        <span>免费开店</span>
      </div>
    </header>
    <nav class="mui-bar mui-bar-tab my-footer">
      <a class="mui-tab-item" href="index.html">
        <span class="mui-icon iconfont icon-fuwuzhongjiewuye my-icon"></span>
        <span class="mui-tab-label">首页</span>
      </a>
      <a class="mui-tab-item" href="manage.html">
        <span class="mui-icon iconfont icon-shengchangzhouqi my-icon"></span>
        <span class="mui-tab-label">数据</span>
      </a>
      <a class="mui-tab-item" href="equipment.html">
        <span class="mui-icon iconfont icon-shebei my-icon"></span>
        <span class="mui-tab-label">服务</span>
      </a>
      <a class="mui-tab-item mui-active" href="login.html">
        <span class="mui-icon iconfont icon-wode my-icon"></span>
        <span class="mui-tab-label">我的</span>
      </a>
    </nav>
    <div class="mui-content" id="temCont"></div>

    <script type="text/template" id="temScript">
      <%if(res=='null'){%>
        <div class="my-logo">
          <img src="./images/logo.png" alt="" />
        </div>
        <div class="my-ipt">
          <div class="mui-input-row">
            <input
              type="text"
              class="mui-input-clear"
              placeholder="请输入用户名"
              id="btn"
            />
          </div>
          <div class="mui-input-row">
            <input
              type="password"
              class="mui-input-password"
              placeholder="请输入密码"
              id="pass"
            />
          </div>
          <div class="mui-input-row my-tips">
            <span class="ctxt"></span>
          </div>
        </div>
        <div class="my-login">登 录</div>
        <div class="forget"><a href="contact.html">忘记密码?</a></div>
        <div class="register">没有账号? <span>立即注册</span></div>
        <div class="blank"></div>
        <%}else{%>
          <div class="user-nav">
            <div class="user-nav-inner">
              <div class="user-nav-l">
                <div class="ima"><img src="./images/zhuye.png" alt="" /></div>
                <div class="img-r">
                  <p>我的主页</p>
                  <p>您的个人专属</p>
                </div>
              </div>
              <div class="user-nav-r">
                <div class="ima"><img src="./images/renzheng.png" alt="" /></div>
                <div class="img-r">
                  <p>我要认证</p>
                  <p>个人/企业认证</p>
                </div>
              </div>
            </div>
          </div>

          <div class="expert-new">
            <a class="expert-new-inner" href="expert.html">
              <img src="./images/expert.png" alt=""  class="expertImg"/> 专家对接 (您的个人专属专家服务)
            </a>
          </div>

          <div class="expert-new">
            <a class="expert-new-inner" href="books.html">
              <img src="./images/books.png" alt=""  class="expertImg" style="width:23px;height:23px;"/> 作物百科 (您的掌上百科全书)
            </a>
          </div>

          <div class="my-order">
            <div class="my-order-inner">
              <div class="my-order-title">
                <div class="my-order-title-l">我的订单</div>
                <div class="my-order-title-r">查看全部 ></div>
              </div>
              <div class="my-order-cont">
                <div class="my-order-item">
                  <img src="./images/daizhifu2.png" alt="" />
                  <p>待支付</p>
                </div>
                <div class="my-order-item">
                  <img src="./images/daifahuo2.png" alt="" />
                  <p>待发货</p>
                </div>
                <div class="my-order-item">
                  <img src="./images/daishouhuofuben2.png" alt="" />
                  <p>待收货</p>
                </div>
                <div class="my-order-item">
                  <img src="./images/tuikuan2.png" alt="" />
                  <p>退款/售后</p>
                </div>
              </div>
            </div>
          </div>

          <div class="my-report">
            <div class="my-report-inner">
                <div class="my-report-item">
                  <img src="./images/nongqing.png" alt="" />
                  <p>农情上报</p>
                </div>
                <div class="my-report-item">
                  <img src="./images/zaiqing.png" alt="" />
                  <p>灾情上报</p>
                </div>
            </div>
          </div>

          <div class="logout-new">
            <div class="logout-new-inner">
              退出登录
            </div>
          </div>
          <%}%>
    </script>
  </body>
</html>
